<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Foo</title>
  <link href="http://example.com/foo" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-line-numbers */

.line-numbered {
    display: grid !important;
    grid-template-columns: min-content 1fr;
    grid-auto-flow: row;
}
.line-numbered > *,
.line-numbered::before,
.line-numbered::after {
    grid-column: 1/-1;
}
.line-no {
    grid-column: 1;
    color: gray;
}
.line {
    grid-column: 2;
}
.line:hover {
    background: rgba(0,0,0,.05);
}
.line-no[data-line]::before {
    padding: 0 .5em 0 .1em;
    content: attr(data-line);
}
.line-no[data-line-end]::after {
    padding: 0 .5em 0 .1em;
    content: attr(data-line-end);
}
</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-line-highlighting */

.line-numbered {
    display: grid !important;
    grid-template-columns: min-content 1fr;
    grid-auto-flow: rows;
}
.line-numbered > *,
.line-numbered::before,
.line-numbered::after {
    grid-column: 1/-1;
}
.line-no {
    grid-column: 1;
    color: gray;
}
.line {
    grid-column: 2;
}
.line.highlight-line {
    background: rgba(0,0,0,.05);
}
.line-no.highlight-line {
    background: rgba(0,0,0,.05);
    color: #444;
    font-weight: bold;
}
.line-no.highlight-line[data-line]::before {
    padding: 0 .5em 0 .1em;
    content: attr(data-line);
}
.line-no.highlight-line[data-line-end]::after {
    padding: 0 .5em 0 .1em;
    content: attr(data-line-end);
}
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1>Foo</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="http://example.com/foo">http://example.com/foo</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Example Editor</span>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright">COPYRIGHT GOES HERE </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Testing that line numbers/highlighting works.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
  </nav>
  <main>
<pre class="highlight" no-line-numbers>[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]
<c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {
    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;
    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;
};
</pre>
<pre class="highlight" no-line-numbers>[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]
<c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {
    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;
    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;
};
</pre>
   <div no-line-numbers>
<pre class="highlight">[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]
<c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {
    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;
    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;
    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;
};
</pre>
   </div>
<pre class="highlight line-numbered"><span class="line-no" data-line="1"></span><span class="line">[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]</span><span class="line-no" data-line="2"></span><span class="line"><c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {</span><span class="line-no" data-line="3"></span><span class="line">    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;</span><span class="line-no" data-line="4"></span><span class="line">    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;</span><span class="line-no" data-line="5"></span><span class="line">    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;</span><span class="line-no" data-line="6"></span><span class="line">};</span></pre>
<pre class="highlight line-numbered"><span class="line-no" data-line="1"></span><span class="line">[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]</span><span class="line-no" data-line="2"></span><span class="line"><c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {</span><span class="line-no" data-line="3"></span><span class="line">    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;</span><span class="line-no" data-line="4"></span><span class="line">    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;</span><span class="line-no" data-line="5"></span><span class="line">    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;</span><span class="line-no" data-line="6"></span><span class="line">};</span></pre>
<pre class="highlight line-numbered" line-start="5"><span class="line-no" data-line="5"></span><span class="line">[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]</span><span class="line-no" data-line="6"></span><span class="line"><c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {</span><span class="line-no" data-line="7"></span><span class="line">    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;</span><span class="line-no" data-line="8"></span><span class="line">    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;</span><span class="line-no" data-line="9"></span><span class="line">    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;</span><span class="line-no" data-line="10"></span><span class="line">};</span></pre>
<pre class="highlight line-numbered" line-highlight="2-4, 6, 8 - 10" no-line-numbers><span class="line-no"></span><span class="line">[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]</span><span class="line-no highlight-line" data-line="2"></span><span class="line highlight-line"><c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {</span><span class="line-no highlight-line" data-line="3"></span><span class="line highlight-line">    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;</span><span class="line-no highlight-line" data-line="4"></span><span class="line highlight-line">    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;</span><span class="line-no"></span><span class="line">    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;</span><span class="line-no highlight-line" data-line="6"></span><span class="line highlight-line">};</span></pre>
<pre class="highlight line-numbered" line-highlight="2-4, 6, 8 - 10" line-start="5"><span class="line-no" data-line="5"></span><span class="line">[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]</span><span class="line-no highlight-line" data-line="6"></span><span class="line highlight-line"><c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {</span><span class="line-no" data-line="7"></span><span class="line">    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;</span><span class="line-no highlight-line" data-line="8"></span><span class="line highlight-line">    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;</span><span class="line-no highlight-line" data-line="9"></span><span class="line highlight-line">    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;</span><span class="line-no highlight-line" data-line="10"></span><span class="line highlight-line">};</span></pre>
<pre class="highlight line-numbered" line-highlight="2-4, 6, 8 - 10" line-start="5"><span class="line-no" data-line="5"></span><span class="line">[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]</span><span class="line-no highlight-line" data-line="6"></span><span class="line highlight-line"><c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {</span><span class="line-no" data-line="7"></span><span class="line">    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;</span><span class="line-no highlight-line" data-line="8"></span><span class="line highlight-line">    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;</span><span class="line-no highlight-line" data-line="9"></span><span class="line highlight-line">    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;</span><span class="line-no highlight-line" data-line="10"></span><span class="line highlight-line">};</span></pre>
<pre class="highlight line-numbered"><span class="line-no" data-line="1"></span><span class="line">[<c- g>Constructor</c->(<c- b>double</c-> <c- g>value</c->, <c- b>DOMString</c-> <c- g>unit</c->)]</span><span class="line-no" data-line="2"></span><span class="line"><c- b>interface</c-> <c- g>CSSUnitValue</c-> : <c- n>CSSNumericValue</c-> {</span><span class="line-no" data-line="3"></span><span class="line"></span><span class="line-no" data-line="4"></span><span class="line">    <c- b>attribute</c-> <c- b>double</c-> <c- g>value</c->;</span><span class="line-no" data-line="5"></span><span class="line"></span><span class="line-no" data-line="6"></span><span class="line">    <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>unit</c->;</span><span class="line-no" data-line="7"></span><span class="line"></span><span class="line-no" data-line="8"></span><span class="line">    <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <c- g>type</c->;</span><span class="line-no" data-line="9"></span><span class="line">};</span></pre>
  </main>